<template>
  <div>
    <!-- 主体内容 -->
    <el-row :gutter="20" class="m-t-20 f-large">
      <!-- 无人船状态 -->
      <el-col :span="24">
        <el-card class="box-card theme-bg4 text-center state-wiew">
          <div class="f-Elarge">无人船正常运行</div>
          <div class="f-Xlarge f-w-600">{{ shipState }}</div>
          <div>执行计划ID：{{ toDoPlan }}</div>
          <img src="@/assets/user/State-on1.svg" alt="" />
        </el-card>
      </el-col>
      <!-- 天气情况 -->
      <el-col :span="12">
        <el-card class="box-card m-t-20 theme-bg icon-view">
          <div>天气: {{ weatherData.weather }}</div>
          <div class="f-Elarge m-t-5">
            {{ weatherData.wind_direction }} 风力 {{ weatherData.wind_power }}级
          </div>
          <div class="m-t-5">
            当前气温 <span class="f-w-600">{{ weatherData.degree }}°C</span>
          </div>
          <em><i class="fa fa-thermometer-2" aria-hidden="true"></i></em>
        </el-card>
      </el-col>
      <!-- 电量显示 -->
      <el-col :span="12">
        <el-card class="box-card m-t-20" style="position: relative">
          <div class="m-y-20">
            <h4>
              无人船电量状态<i class="fa fa-caret-down m-l-5" aria-hidden="true"></i>
            </h4>
            <p class="f-medium text-c-gray m-t-5">电量充足，预测可运行7小时</p>
          </div>
          <div class="ele-icon theme-bg">
            <span class="f-w-700">86</span><span class="f-medium">%</span>
          </div>
        </el-card>
      </el-col>
      <!-- 风力传感器 -->
      <el-col :span="24">
        <el-card class="box-card bg-gray m-t-20 text-center" shadow="never">
          <div class="f-w-600 f-medium">风力传感器状态</div>
          <div class="f-small text-c-gray">Wind sensor status</div>
        </el-card>
      </el-col>
      <!-- 左边等级 -->
      <el-col :span="12">
        <el-card class="box-card theme-bg3 m-t-20 icon-view">
          <div class="p-y-10">
            <span class="f-Xlarge f-w-400 m-r-15">{{
              windTypeList[index].name
            }}</span>
            <span>风力等级：{{ windTypeList[index].level }}级</span>
          </div>
          <div>风速：{{ windTypeList[index].speed }} m/s</div>
          <el-tag type="info" class="m-t-5"><span class="text-c-dark f-w-400">浪高：{{ windTypeList[index].waveheight
          }}m</span></el-tag>
          <em><i class="fa fa-font-awesome" aria-hidden="true"></i></em>
        </el-card>
      </el-col>
      <!-- 右边描述 -->
      <el-col :span="12">
        <el-card class="box-card m-t-20" style="position: relative">
          <div>
            <h4>
              陆地物象<i class="fa fa-caret-down m-l-5" aria-hidden="true"></i>
            </h4>
            <p class="f-medium text-c-gray">
              {{ windTypeList[index].landCondition }}
            </p>
          </div>
          <div class="m-t-20">
            <h4>
              水面物象<i class="fa fa-caret-down m-l-5" aria-hidden="true"></i>
            </h4>
            <p class="f-medium text-c-gray">
              {{ windTypeList[index].seaCondition }}
            </p>
          </div>
          <div class="wind-icon theme-bg2">
            <i class="fa fa-bar-chart" aria-hidden="true"></i>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { getNewestFan } from "@/api/statusInfo";
export default {
  name: "StateObservation",
  data() {
    return {
      weatherData: {
        degree: "",
        weather: "",
        wind_direction: "",
        wind_power: "",
      },
      windTypeList: [
        {
          level: "0",
          name: "无风",
          speed: "0.0-0.2",
          landCondition: "直烟向上,感觉无风吹拂",
          seaCondition: "平静",
          waveheight: "0.0",
        },
        {
          level: "1",
          name: "软风",
          speed: "0.3-1.5",
          landCondition: "直烟向上,感觉无风吹拂",
          seaCondition: "微波峰无飞沫",
          waveheight: "0.1",
        },
        {
          level: "2",
          name: "轻风",
          speed: "1.6-3.3",
          landCondition: "感觉有风,树叶有一点声响",
          seaCondition: "小波峰未破碎",
          waveheight: "0.2",
        },
        {
          level: "3",
          name: "微风",
          speed: "3.4-5.4",
          landCondition: "树叶树枝摇摆，旗帜展开",
          seaCondition: "小波峰顶破裂",
          waveheight: "0.6",
        },
        {
          level: "4",
          name: "和风",
          speed: "5.5-7.9",
          landCondition: "直吹起尘土、纸张、灰尘、沙粒",
          seaCondition: "小浪白沫峰群",
          waveheight: "1.0",
        },
        {
          level: "5",
          name: "轻劲风",
          speed: "8.0-10.7",
          landCondition: "小树摇摆，湖面泛小波，阻力极大",
          seaCondition: "中浪折沫峰群",
          waveheight: "2.0",
        },
        {
          level: "6",
          name: "强风",
          speed: "10.8-13.8",
          landCondition: "树枝摇动，电线有声，举伞困难",
          seaCondition: "大浪到个飞沫",
          waveheight: "3.0",
        },
        {
          level: "7",
          name: "疾风",
          speed: "13.9-17.1",
          landCondition: "步行困难，大树摇动，气球吹起或破裂",
          seaCondition: "破峰白沫成条",
          waveheight: "4.0",
        },
        {
          level: "8",
          name: "大风",
          speed: "17.2-20.7",
          landCondition: "折断树枝，前行感觉阻力很大，伞被吹走",
          seaCondition: "浪长高有浪花",
          waveheight: "5.5",
        },
        {
          level: "9",
          name: "烈风",
          speed: "20.8-24.4",
          landCondition: "屋顶受损，瓦片吹飞，树枝折断",
          seaCondition: "浪峰倒卷",
          waveheight: "7.0",
        },
        {
          level: "10",
          name: "狂风",
          speed: "24.5-28.4",
          landCondition: "拔起树木，摧毁房屋",
          seaCondition: "海浪翻涌咆哮",
          waveheight: "9.5",
        },
        {
          level: "11",
          name: "暴风",
          speed: "28.5-32.6",
          landCondition: "摧毁平台，房屋吹走，可能出现“沙尘暴”",
          seaCondition: "波峰全呈飞沫",
          waveheight: "11.5",
        },
      ],
      index: "0",
    };
  },
  mounted() {
    this.$store.dispatch("cruiseManage/toGetControlModel");
    this.toGetWeather();
    this.toGetWindStatus();
  },
  methods: {
    // 获取天气信息
    toGetWeather() {
      let options = {
        source: "pc", //电脑访问
        weather_type: "forecast_1h", //获取未来48小时
        province: "广东省",
        city: "茂名市",
      };
      this.$jsonp("http://wis.qq.com/weather/common", options).then((res) => {
        console.log(res);
        this.weatherData = res.data.forecast_1h[0];
      });
    },
    // 获取风力传感器状态
    toGetWindStatus() {
      getNewestFan()
        .then((res) => {
          let level = res ?? 0;
          level = res > 6 ? 6 : res;
          this.index = level;
        })
        .catch((err) => {
          console.log("风力等级请求失败", err);
        });
    },
  },
  computed: {
    ...mapState("cruiseManage", ["shipState"]),
    ...mapGetters("cruiseManage", ["toDoPlan"]),
  },
  beforeDestroy() {
    // 离开页面时对状态清空
    this.$store.commit("cruiseManage/clearData");
  },
};
</script>

<style lang="less" scoped>
.state-wiew {
  position: relative;

  img {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    width: 120px;
    height: auto;
  }
}

.icon-view {
  position: relative;

  em {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    line-height: 70px;
    font-size: 70px;
    color: rgba(255, 255, 255, 0.5);
  }
}

.wind-icon {
  position: absolute;
  padding: 10px;
  border-radius: 10px;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  line-height: 40px;
  font-size: 40px;
}

.ele-icon {
  position: absolute;
  padding: 10px;
  border-radius: 50%;
  top: 50%;
  right: 9%;
  transform: translateY(-50%);
  font-size: 30px;
}
</style>